<template>
    <div class="dormitory-home">
        <el-form :inline="true" size="mini">
            <el-form-item>
                <el-button type="primary" @click="handleCreateRepair">维修申报</el-button>
                <el-button type="primary" @click="handleCreateArticle">信息发布</el-button>
                <el-button type="primary" @click="handleCreateApplication">我的申请</el-button>
            </el-form-item>
        </el-form>
        <el-card class="dormitory-home-card">
            <div slot="header" class="clearfix">
                <span>基本信息</span>
            </div>
            <div v-if="roomDTO != null" class="text item">
                <span>{{roomDTO.name}} {{roomDTO.buildingType}}人间 （已住{{roomDTO.count}}人）</span>
            </div>
            <hr>
            <div v-if="roomDTO != null" class="text item">
                <div v-for="(item,index) in roomDTO.users">
                    <span>{{item.username}} </span>
                </div>
            </div>
            <div v-else class="text item">
                暂未分配宿舍!
            </div>
        </el-card>
        <el-card class="dormitory-home-card">
            <div slot="header" class="clearfix">
                <span>费用信息</span>
            </div>
            <div v-if="roomDTO != null && roomDTO.roomInfo != null" class="text item">
                电费余额：{{roomDTO.roomInfo.powerRate}} 元
            </div>
            <div v-if="roomDTO != null && roomDTO.roomInfo != null" class="text item">
                水费余额：{{roomDTO.roomInfo.waterRate}} 元
            </div>
            <div v-else class="text item">
                暂无费用信息！
            </div>
        </el-card>
        <el-tabs v-model="activeName" class="dormitory-cms-card" type="border-card" @tab-click="handleClick">
            <el-tab-pane label="通知公告" name="first">
                <el-table
                        :data="tableData"
                        style="width: 100%; margin-bottom: 20px;"
                        row-key="ukId"
                        border
                        stripe
                        height="500"
                        default-expand-all
                        size="mini">
                    <el-table-column
                            prop="username"
                            label="发布人"
                            width="150"
                            min-width="120">
                    </el-table-column>
                    <el-table-column
                            prop="category.name"
                            label="类型"
                            width="150">
                    </el-table-column>
                    <el-table-column
                            prop="title"
                            label="标题"
                            width="*">
                    </el-table-column>
                    <el-table-column
                            :formatter="dateFormatter"
                            prop="gmtModified"
                            label="发布时间"
                            width="200">
                    </el-table-column>
                    <el-table-column
                            label="操作"
                            width="180">
                        <template slot-scope="scope">
                            <el-button
                                    size="mini"
                                    type="danger"
                                    @click="handleBrowser(scope.$index, scope.row)">查看
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-tab-pane>
            <el-tab-pane label="我发布的消息" name="second">
                <el-table
                        :data="myTableData"
                        style="width: 100%; margin-bottom: 20px;"
                        row-key="ukId"
                        border
                        stripe
                        height="500"
                        default-expand-all
                        size="mini">
                    <el-table-column
                            prop="username"
                            label="发布人"
                            width="150"
                            min-width="120">
                    </el-table-column>
                    <el-table-column
                            prop="category.name"
                            label="类型"
                            width="150">
                    </el-table-column>
                    <el-table-column
                            prop="title"
                            label="标题"
                            width="*">
                    </el-table-column>
                    <el-table-column
                            prop="status"
                            label="状态"
                            width="120">
                        <template slot-scope="scope">
                            <el-tag v-if="scope.row.status == '1'" type="success" size="mini">发布</el-tag>
                            <el-tag v-if="scope.row.status == '0'" type="danger" size="mini">草稿</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column
                            :formatter="dateFormatter"
                            prop="gmtModified"
                            label="发布时间"
                            width="200">
                    </el-table-column>
                    <el-table-column
                            label="操作"
                            width="180">
                        <template slot-scope="scope">
                            <el-button
                                    size="mini"
                                    type="danger"
                                    @click="handleBrowser(scope.$index, scope.row)">查看
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-tab-pane>
            <el-tab-pane label="我的申请" name="three">
                <el-table
                        :data="applicationTableData"
                        style="width: 100%; margin-bottom: 20px;"
                        row-key="ukId"
                        border
                        default-expand-all
                        stripe
                        size="mini">
                    <el-table-column
                            prop="name"
                            label="申请者姓名"
                            sortable
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="type"
                            label="申请类型"
                            sortable
                            width="180">
                        <template slot-scope="scope">
                            <el-tag v-if="scope.row.type == '0'" size="mini">晚归申请</el-tag>
                            <el-tag v-if="scope.row.type == '1'" size="mini">教室使用申请</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="phone"
                            label="联系方式"
                            sortable
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="content"
                            label="申请备注"
                            width="*">
                    </el-table-column>
                    <el-table-column
                            prop="status"
                            label="状态"
                            width="150">
                        <template slot-scope="scope">
                            <el-tag v-if="scope.row.status == '0'" type="primary" size="mini">待批准</el-tag>
                            <el-tag v-if="scope.row.status == '1'" type="success" size="mini">通过</el-tag>
                            <el-tag v-if="scope.row.status == '2'" type="danger" size="mini">未通过审核</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column
                            :formatter="dateFormatter"
                            prop="startTime"
                            label="开始时间"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            :formatter="dateFormatter"
                            prop="endTime"
                            label="结束时间"
                            width="180">
                    </el-table-column>
                </el-table>
            </el-tab-pane>
            <el-tab-pane label="维修申请" name="fore">
                <el-table
                        :data="repairTableData"
                        style="width: 100%; margin-bottom: 20px;"
                        row-key="ukId"
                        border
                        default-expand-all
                        stripe
                        size="mini">
                    <el-table-column
                            prop="code"
                            label="维修单号"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="name"
                            label="报修人姓名"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="room.name"
                            label="故障位置"
                            width="200">
                    </el-table-column>
                    <el-table-column
                            prop="content"
                            label="故障信息"
                            width="200">
                    </el-table-column>
                    <el-table-column
                            label="故障分类"
                            width="180">
                        <template slot-scope="scope">
                            <span v-if="properties != null" v-for="(item,index) in scope.row.properties">
                                <span>{{item.name}} </span>
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="status"
                            label="状态"
                            width="200">
                        <template slot-scope="scope">
                            <el-tag v-if="scope.row.status == '1'" type="success" size="mini">已维修</el-tag>
                            <el-tag v-if="scope.row.status == '0'" type="danger" size="mini">故障</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="gmtCreate"
                            label="创建时间"
                            width="200">
                    </el-table-column>
                    <el-table-column
                            :formatter="dateFormatter"
                            prop="comingTime"
                            label="预约时间"
                            width="*">
                    </el-table-column>
                </el-table>
            </el-tab-pane>
        </el-tabs>
        <el-dialog title="活动通知" :visible.sync="dialogFormVisible" :close-on-click-modal="false" label-width="80px">
            <el-row>
                <el-col class="cms-text" :span="4">消息分类:</el-col>
                <el-col class="cms-text" :span="20">{{categoryName}}</el-col>
                <el-col class="cms-text" :span="4">标题:</el-col>
                <el-col class="cms-text" :span="20">{{articleForm.title}}</el-col>
                <el-col class="cms-text" :span="4">内容:</el-col>
                <el-col class="cms-text" :span="20">
                    <quill-editor ref="text"
                                  v-model="articleForm.content"
                                  class="myQuillEditor"
                                  @ready="onEditorReady($event)"
                                  :options="editorReadOption"/>
                </el-col>
            </el-row>
            <el-button @click="dialogFormVisible = false">关 闭</el-button>
        </el-dialog>
        <el-dialog title="维修申报" :visible.sync="dialogRepairFormVisible" :close-on-click-modal="false"
                   label-width="80px">
            <el-form ref="form" :model="repairForm" label-width="80px">
                <el-form-item label="姓名">
                    <el-input v-model="repairForm.name" disabled></el-input>
                </el-form-item>
                <el-form-item label="房间">
                    <el-cascader
                            v-model="repairForm.roomId"
                            :options="buildingRooms"
                            :show-all-levels="false"
                            disabled>
                    </el-cascader>
                </el-form-item>
                <el-form-item label="联系方式">
                    <el-input v-model="repairForm.phone"></el-input>
                </el-form-item>
                <el-form-item label="报修类型">
                    <el-select v-model="repairForm.propertyIds" multiple placeholder="请选择">
                        <el-option
                                v-for="item in properties"
                                :key="item.ukId"
                                :label="item.name"
                                :value="item.ukId">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="报修内容">
                    <el-input
                            type="textarea"
                            placeholder="请输入内容"
                            v-model="repairForm.content"
                            :rows="2"
                            maxlength="200"
                            show-word-limit
                            resize="none">
                    </el-input>
                </el-form-item>
                <el-form-item label="维修时间">
                    <el-date-picker
                            v-model="repairForm.comingTime"
                            type="datetime"
                            placeholder="选择日期时间">
                    </el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="handleRepairSave">保存</el-button>
                    <el-button @click="dialogRepairFormVisible = false">取 消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <el-dialog title="活动通知" :visible.sync="dialogArticleFormVisible" :close-on-click-modal="false"
                   label-width="80px">
            <el-form ref="form" :model="myArticleForm" label-width="80px">
                <el-form-item label="消息分类">
                    <el-select placeholder="请选择消息分类"
                               v-model="myArticleForm.categoryId">
                        <el-option
                                v-for="item in categories"
                                :key="item.ukId"
                                :label="item.name"
                                :value="item.ukId">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="标题">
                    <el-input v-model="myArticleForm.title" placeholder="请输入标题" required></el-input>
                </el-form-item>
                <el-form-item label="内容">
                    <quill-editor ref="text"
                                  v-model="myArticleForm.content"
                                  class="myQuillEditor"
                                  :options="editorOption"/>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="handleArticleSave">保存</el-button>
                    <el-button @click="dialogArticleFormVisible = false">取 消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <el-dialog title="我的申请" :visible.sync="dialogApplicationFormVisible" label-width="80px">
            <el-form ref="form" :model="applicationForm" label-width="100px">
                <el-form-item label="申请类型">
                    <el-select v-model="applicationForm.type" placeholder="请选择申请类型">
                        <el-option label="晚归申请" value="0"></el-option>
                        <el-option label="教室使用申请" value="1"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="申请者姓名">
                    <el-input v-model="applicationForm.name" placeholder="请输入姓名" disabled></el-input>
                </el-form-item>
                <el-form-item label="联系方式">
                    <el-input v-model="applicationForm.phone" placeholder="多个联系方式请用逗号隔开"></el-input>
                </el-form-item>
                <el-form-item label="申请说明">
                    <el-input type="textarea"
                              v-model="applicationForm.content"
                              :rows="2"
                              resize="none"
                              maxlength="200"
                              show-word-limit>
                    </el-input>
                </el-form-item>
                <el-form-item label="开始时间">
                    <el-date-picker
                            v-model="applicationForm.startTime"
                            type="datetime"
                            placeholder="选择开始时间">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="结束时间">
                    <el-date-picker
                            v-model="applicationForm.endTime"
                            type="datetime"
                            placeholder="选择结束时间">
                    </el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="handleApplicationSave">保存</el-button>
                    <el-button @click="dialogApplicationFormVisible = false">取 消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
    import {VueQuillEditor} from "vue-quill-editor";
    import 'quill/dist/quill.core.css';
    import 'quill/dist/quill.snow.css';
    import 'quill/dist/quill.bubble.css';

    import {listArticle, selectArticleDetails, listArticleByCurrentUser, saveArticle} from "../../../api/cms/article";
    import {listRepair, saveRepair,} from "../../../api/repair/repair";
    import {listBuilding} from "../../../api/manage/building";
    import {listRoomByBuildingId, selectRoomByUserId,} from "../../../api/manage/room";
    import {listDictItemByDictCode} from "../../../api/platform/dictItem";
    import PageSizeUtils from "../../../utils/PageSizeUtils";
    import {saveApplication} from "../../../api/daily/application";
    import {listApplicationByUser,} from "../../../api/daily/application";
    import {getLoginUser} from "../../../api/platform/login";


    export default {
        name: "Home",
        components: {VueQuillEditor,},
        data() {
            return {
                roomDTO: {
                    users: []
                },
                tableData: [],
                myTableData: [],
                applicationTableData: [],
                repairTableData: [],
                dialogFormVisible: false,
                dialogRepairFormVisible: false,
                dialogArticleFormVisible: false,
                dialogApplicationFormVisible: false,
                articleForm: {},
                categoryName: "",
                editorOption: {
                    theme: 'snow',
                    placeholder: "请在这里输入",
                },
                editorReadOption: {
                    theme: 'snow',
                    modules: {
                        toolbar: null,
                    }
                },
                repairForm: {
                    name: "",
                    roomId: "",
                    phone: "",
                    propertyIds: [],
                    content: "",
                    comingTime: "",
                },
                buildingRooms: [],
                properties: [],
                activeName: 'first',
                myArticleForm: {
                    categoryId: "",
                    title: "",
                    content: "",
                },
                applicationForm: {
                    name: "",
                    type: "",
                    phone: "",
                    content: "",
                    startTime: "",
                    endTime: "",
                },
                searchForm: {},
                categories: [],
            }
        },
        methods: {
            selectRoom() {
                selectRoomByUserId().then(response => {
                    this.roomDTO = response.data.room
                }).catch(error => {
                    console.log(error)
                })
            },
            listArticle(current, size) {
                this.searchForm.status = 1
                listArticle(this.searchForm, current, size).then(response => {
                    this.tableData = response.data.articles.records
                    PageSizeUtils.setPagination(response.data.articles)
                }).catch(error => {
                    console.log(error)
                })
            },
            handleBrowser(index, row) {
                selectArticleDetails(row.ukId).then(response => {
                    this.articleForm = response.data.article
                    this.categoryName = this.articleForm.category.name
                    this.dialogFormVisible = true
                }).catch(error => {
                    console.log(error)
                })
            },
            listBuildingRoom() {
                this.buildingRooms = [];
                listBuilding().then(response => {
                    let buildingList = new Array();
                    buildingList = response.data.buildings.records;
                    for (let index in buildingList) {
                        listRoomByBuildingId(buildingList[index].ukId).then(response => {
                            let roomList = new Array();
                            roomList = response.data.rooms;
                            let rooms = new Array();
                            for (let i in roomList) {
                                rooms.push({
                                    label: roomList[i].name,
                                    value: roomList[i].ukId,
                                })
                            }
                            this.buildingRooms.push({
                                label: buildingList[index].name,
                                value: buildingList[index].ukId,
                                children: rooms,
                            })

                        })
                    }
                })
            },
            listProperty() {
                this.properties = [];
                listDictItemByDictCode("SAIS_PROPERTY").then(response => {
                    this.properties = response.data.dictItems
                    this.properties.push({
                        ukId: 'null',
                        name: '其他',
                    })
                }).catch(error => {
                    console.log(error)
                })
            },
            handleCreateRepair(index, row) {
                this.repairForm = {}
                this.listBuildingRoom();
                this.listProperty();

                getLoginUser("").then(response => {
                    this.repairForm.name = response.data.loginUser.username;
                    this.dialogRepairFormVisible = true;
                }).catch(error => {
                    console.log(error)
                })

                selectRoomByUserId().then(response => {
                    this.repairForm.roomId = response.data.room.ukId
                }).catch(error => {
                    console.log(error)
                })

            },
            handleRepairSave() {
                saveRepair(this.repairForm).then(response => {
                    this.handleClick({name: "fore"}, null)
                    this.dialogRepairFormVisible = false;
                }).catch(error => {
                    console.log(error)
                })
            },
            handleCreateArticle(index, row) {
                this.myArticleForm = {};
                listDictItemByDictCode("SAIS_CMS").then(resopnse => {
                    this.categories = resopnse.data.dictItems
                    this.dialogArticleFormVisible = true;
                }).catch(error => {
                    console.log(error)
                })

            },
            handleArticleSave() {
                saveArticle(this.myArticleForm).then(response => {
                    this.listArticle(this.$store.state.Navigation.pagination.current,
                        this.$store.state.Navigation.pagination.size);
                    this.handleClick({name: "second"}, null)
                    this.dialogArticleFormVisible = false;
                }).catch(error => {
                    console.log(error)
                })
            },
            handleCreateApplication(index, row) {
                this.applicationForm = {};
                getLoginUser("").then(response => {
                    this.applicationForm.name = response.data.loginUser.username;
                    this.dialogApplicationFormVisible = true;
                }).catch(error => {
                    console.log(error)
                })
            },
            handleApplicationSave(index, row) {
                saveApplication(this.applicationForm).then(response => {
                    this.handleClick({name: "three"}, null)
                    this.dialogApplicationFormVisible = false;
                }).catch(error => {
                    console.log(error)
                })

            },
            dateFormatter(row, column, cellValue, index, type) {
                let replace = cellValue.replace("T", " ");
                return replace.substring(0, 19);
            },
            onEditorReady(editor) { // 富文本准备时的事件
                editor.enable(false);
            },
            handleClick(tab, event) {
                if (tab.name == "first") {
                    this.listArticle(this.$store.state.Navigation.pagination.current,
                        this.$store.state.Navigation.pagination.size)
                }

                if (tab.name == "second") {
                    listArticleByCurrentUser().then(response => {
                        this.myTableData = response.data.articles
                    }).then(error => {
                        console.log(error)
                    })
                }

                if (tab.name == "three") {
                    listApplicationByUser().then(response => {
                        this.applicationTableData = response.data.applications
                    }).then(error => {
                        console.log(error)
                    })
                }

                if (tab.name == "fore") {
                    getLoginUser("").then(response => {
                        listRepair({name: response.data.loginUser.username}, 1, 30).then(response => {
                            this.repairTableData = response.data.repairs.records;
                            PageSizeUtils.setPagination(response.data.repairs)
                        }).catch(error => {
                            console.log(error)
                        })
                    }).catch(error => {
                        console.log(error)
                    })
                }
            },

        },
        created() {
            PageSizeUtils.setPagination({});
            this.selectRoom();
            this.listArticle(this.$store.state.Navigation.pagination.current,
                this.$store.state.Navigation.pagination.size);
        },
        computed: {
            editor() {
                return this.$refs.myQuillEditor.quill;
            },
        }
    }
</script>

<style scoped>
    .dormitory-home {

    }

    .dormitory-home-card {
        margin-left: 5px;
        width: 48%;
        height: 200px;
        float: left;
    }

    .dormitory-cms-card {
        margin-top: 10px;
        margin-left: 5px;
        width: 97%;
        float: left;
    }

    .cms-text {
        margin-bottom: 10px;
        font-size: 16px;
    }
</style>
